<template>
  <div>
    <ul>
      <li>
        <!-- 声明式导航 -->
        <!-- exact严格匹配 -->
        <!-- <router-link tag="div" active-class="active" exact to="/">首页</router-link> -->
        <router-link active-class="active" exact to="/home">首页</router-link>
      </li>
      <li>
        <router-link active-class="active" :to="{ path: '/news' }"
          >新闻页</router-link
        >
      </li>
    </ul>
    <!-- 路由渲染容器 -->
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang='scss' scoped>
.router-link-active {
  color: red;
}
.active {
  color: blue;
}
</style>